<% set_page_title(:project_board, project_name: @visualization.project.name ) %>

<%= turbo_stream_from @visualization %>

<%= start_pending_app_tour_tag("visualization/board") %>


<%= render partial: 'projects/navigation_header', locals: {
  project: @visualization.project
} %>


<main class="grow  visualization--board tour--visualization-board"
  data-controller="visualization--issue-filtering visualization--favorite-issue-labels"
  data-action="keydown@window->visualization--favorite-issue-labels#onKeyPress"
  data-visualization--favorite-issue-labels-add-path-value="<%= add_label_project_issue_path(@visualization.project, 'ISSUE_ID_PLACEHOLDER') %>"
  data-visualization--favorite-issue-labels-remove-path-value="<%= remove_label_project_issue_path(@visualization.project, 'ISSUE_ID_PLACEHOLDER') %>"
  >
  <div class="flex flex-col h-full">
    <%= render partial: 'board_header', locals: { visualization: @visualization } %>

    <%= turbo_frame_tag('grouping_form') {} %>
    <%= turbo_frame_tag('move_all_issues_modal') {} %>

    <div class="mt-4 relative grow cpy-columns-wrapper">
      <div class="absolute top-0 left-0 right-0 bottom-0 sm:top-0 sm:pl-8 sm:pr-8 sm:pb-4 sm:scroll-pr-8 pb-2 sm:px-8 gap-x-8 flex flex-row overflow-x-auto overflow-y-hidden scroll-smooth">
        <ul
            class="hidden has-[li]:flex flex-row flex-nowrap gap-x-8 items-start"
            id="js-kanban-board"
            data-controller="sortable visualization--board"
            data-sortable-target="container"
            data-sortable-ignore-drag-selector-value=".js-no-column-drag"
            data-sortable-move-path-value="<%= move_visualization_groupings_path(@visualization) %>"
            data-visualization--board-signed-groupings-stream-token-value="<%= signed_stream_token({action: 'update', visualization_id: @visualization.id}) %>"
            data-visualization--board-signed-allocations-stream-token-value="<%= signed_stream_token({action: 'update', visualization_id: @visualization.id}) %>"
            >
          <%= render partial: 'visualizations/column', collection: @visualization.groupings.sort_by(&:position), as: :grouping, locals: {
            visualization: @visualization,
            open_issue:  @open_issue
          } %>
        </ul>

        <div class="w-64 shrink-0">
          <%= link_to new_visualization_grouping_path(@visualization), class: "btn btn-soft btn-wide", data: { turbo_frame: 'grouping_form' } do %>
            <%= icon_for(:add_entry) %>
            <%= "#{t('actions.create')} #{Grouping.model_name.human.downcase}" %>
          <% end %>
        </div>
      </div>
    </div>

  </div>
</main>
